<template>
    <!-- 顶部内容, 书写在这里, 通过传送门(teleporter) 放在顶部内 -->
    <teleport to=".header">
      <SdyHeader center="search" />
    </teleport>
  
    <div class="sdy-cate">
      <ul class="slide">
        <li
          v-for="(item, index) in cateList"
          :key="item"
          :class="{ active: index === currentCate }"
          @click="currentCate = index">{{ item }}</li>
      </ul>
      <ul class="container">
        <li
          v-for="item in goodsList"
          :key="item.cate">
          <div class="top">{{ item.brand }}</div>
          <div class="content">
            <p @click="$myRouter.push({ path: '/list', query: { keyword: goods.brand } })" v-for="goods in item.list" :key="goods.proid">
              <img :src="goods.img1" alt="">
              <span>￥ {{ goods.originprice.toFixed(2) }}</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </template>
  
  <script name="sdyCate" lang="ts" setup>
  import SdyHeader from '../../components/header.vue'
  import { ref, onMounted, watch } from 'vue'
  import { getCateList, getBrandList, getGoodsForCateAndBrand } from '../../model/goods'
  import { useRouter } from 'vue-router'
  const $myRouter = useRouter()
  
  // 书写接口
  interface GoodsInfo {
    proid: string
    img1: string
    originprice: number
    [key: string]: any
  }
  
  interface GoodsList {
    cate: string
    brand: string,
    list: Array<GoodsInfo>
  }
  
  // 准备一个变量, 表示分类目录列表
  const cateList = ref<string[]>([])
  
  // 准备一个变量, 表示当前选中的分类
  const currentCate = ref<number>(0)
  
  // 获取分类列表
  const getCateListHandler = async () => {
    const res = await getCateList()
    if ((res as unknown as any).code !== '200') return
    cateList.value = res.data.map((item: string) => item.trim())
  }
  
  // 准备一个变量, 表示品牌列表
  const brandList = ref<{ brand: string }[]>([])
  
  // 准备一个变量, 保存商品数据
  const goodsList = ref<Array<GoodsList>>([])
  
  // 请求对应品牌的对应商品
  const getGoodsList = async () => {
    goodsList.value = []
    // 遍历品牌列表
    brandList.value.forEach(async item => {
      const res = await getGoodsForCateAndBrand(cateList.value[currentCate.value], item.brand)
      // 给 goodsList 内的内容赋值
      if ((res as any).code !== '200') return
      goodsList.value.push({
        cate: cateList.value[currentCate.value],
        brand: item.brand,
        list: res.data
      })
    })
  }
  
  // 监控 currentCate 变换
  watch(currentCate, async (newVal) => {
    // 拿到对应的分类
    const cate: string = cateList.value[newVal]
  
    // 发送请求, 请求品牌列表
    const res = await getBrandList(cate || '手机')
    if ((res as any).code !== '200') return
    brandList.value = res.data
  
    // 加一个定时器(让他去到下一个任务队列)
    setTimeout(() => {
      // 请求对应品牌的对应商品
      getGoodsList()
    }, 10)
  }, {
    immediate: true
  })
  
  onMounted(() => {
    getCateListHandler()
  })
  
  </script>
  
  <style scoped lang="scss">
  .sdy-cate {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
  
    > .slide {
      width: 80px;
      overflow: auto;
  
      > li {
        background-color: #F6F6F6;
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        transition: all .3s linear;
  
        &.active {
          background-color: #fff;
          color: red;
        }
      }
    }
  
    > .container {
      flex: 1;
      overflow: auto;
      box-sizing: border-box;
      padding: 5px;
  
      > li {
        margin-bottom: 30px;
  
        > .top {
          height: 30px;
          font-weight: 700;
        }
  
        > .content {
          display: block;
          padding: 0 10px;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
  
          > p {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
  
            > img {
              width: 60px;
              height: 60px;
              margin-bottom: 10px;
              display: block;
            }
  
            > span {
              color: red;
            }
          }
        }
      }
    }
  }
  </style>
  